<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;list-style:none;}
        .nav{width: 100%;height: 60px;line-height: 60px;text-align: center;}
        .nav>ul{display: flex;width: 100%;background: #efefef;}
        .nav>ul>li{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;height: 60px;}

        .nav>ul>li>ul{display: none}
        .nav>ul>li>ul{border: solid 1px #000;border-top:none;line-height: 40px;}
        .nav>ul>li>ul>li{position: relative;}

        .nav ul ul ul{display: none}
        .nav ul ul ul{position: absolute;line-height: 20px;width: 200px;background: #ccc;right: -200px;top:0;}

        .nav li:hover{background: red}

        .nav>ul>li:last-child ul ul{left:-200px;}
    </style>
    <script src="./jquery.js"></script>
    <script>

        $(function(){
            $('.nav').find("ul").find("li").hover(function(){
                $(this).children("ul").show();
            },function(){
                $(this).children("ul").hide();
            })
        })

    </script>
</head>
<body>
    <!-- 三级菜单 -->
    <div class="nav">
        <ul>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
    
</script>
</html>